<template>
	<view>
		<view>
			<view class="detail-container">
				<view class="user-item">
					<image @click="jumpUser(postDetail.uid)" :src="postDetail.sysUser.avatar"></image>
					<view class="user-item-user">
						<text class="user-name">{{ postDetail.sysUser.nickName }}</text>

						<view class="userIntro">这个人很懒</view>
					</view>
					<uni-icons custom-prefix="custom-icon" type="trash-filled" size="25"
						style="margin-right: 300rpx; margin-top: 15rpx;" @click="deletes" v-show="del">
					</uni-icons>

					<button style="margin-top: 15rpx; height: 50rpx; font-size: 25rpx;"
						class="text-white bg-gradual-blue" v-if="del">楼主</button>
					<button style="margin-top: 15rpx; height: 50rpx; font-size: 25rpx;" v-else>关注</button>
					<!-- 	<u-button v-show="!postDetail.isFollow" size="mini" style="float:right;font-size: 14px;"
						@click="follow">关注</u-button> -->
				</view>

				<view class="icon">
					<text>{{ postDetail.updateTime  }}</text>
				</view>
				<view class="hr"></view>
				<!-- <view class="post-title">{{ postDetail.topicTitle }}</view> -->
				<rich-text class="post-text" :nodes="postDetail.topicContent"></rich-text>
				<!-- 图片 -->
				<!-- 帖子类型 -->
				<block>
					<block v-if="postDetail.topicVideo!=null">
						<video :src="postDetail.topicVideo" controls></video>
					</block>
					<!--一张图片-->
					<block v-if="imageLength(postDetail.topicImgList)==1">
						<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="postDetail.topicImgList"
							@tap.stop="previewImage(postDetail.topicImgList, postDetail.topicImgList)"></image>
					</block>
					<block v-if="imageLength(postDetail.topicImgList)==2">
						<view class="img-style-2">
							<image :lazy-load="true" v-for="(mediaItem, index2) in imageList(postDetail.topicImgList)"
								:key="index2" @tap.stop="previewImage(mediaItem, imageList(postDetail.topicImgList))"
								mode="aspectFill" :src="mediaItem"></image>
						</view>
					</block>
					<block v-if="imageLength(postDetail.topicImgList)==3">
						<view class="img-style-3">
							<image :lazy-load="true" v-for="(mediaItem, index2) in imageList(postDetail.topicImgList)"
								:key="index2" @tap.stop="previewImage(mediaItem, imageList(postDetail.topicImgList))"
								mode="aspectFill" :src="mediaItem"></image>
						</view>
					</block>
					<block v-if="imageLength(postDetail.topicImgList)==4">
						<view class="img-style-4">

							<image :lazy-load="true" v-for="(mediaItem, index2) in imageList(postDetail.topicImgList)"
								:key="index2" @tap.stop="previewImage(mediaItem, imageList(postDetail.topicImgList))"
								mode="aspectFill" :src="mediaItem"></image>
						</view>
					</block>
				</block>
			</view>
			<view class="body">
				<!--点赞、分享、评论-->
				<view class="menu-container">

					<block v-if="show">
						<view class="p-item" @click="cancelCollection()">
							<u-icon name="heart-fill" color="#cc0000" style="width: 40rpx; height: 40rpx;"></u-icon>
							<text>{{ postDetail.topicLikes }}</text>
						</view>
					</block>
					<block v-else>
						<view class="p-item" @click="addCollection()">
							<u-icon name="heart"></u-icon>
							<text>{{ postDetail.topicLikes }}</text>
						</view>
					</block>
					<view class="p-item" @click="focus = true">
						<text class="iconfont" style="font-size: 40rpx;">&#xe64b;</text>
						<text class="count">{{ postDetail.topicCount }}</text>
					</view>
					<view class="p-item" @click="openPopuos()">
						<text class="iconfont" style="font-size: 30rpx;">&#xe600;</text>
						<text>分享</text>
					</view>
				</view>
			</view>

		</view>
		<u-line color="#d8d8d8"></u-line>
		<view class="comment-box">
			<view class="title">评论（{{ postDetail.topicCount }}）</view>
			<view style="margin-bottom: 40rpx;" v-for="(item, index) in commentList" :key="index"
				v-show="item.commentableId==null">
				<view class="comment-item">
					<image @click="jumpUser(item.sysUser.userId)" class="avatar" :src="item.remark"></image>
					<view class="c-content">
						<view class="user">
							<text>{{ item.createBy }}</text>
							<block v-if="item.topicCollection==1">
								<view @click.stop="cancelThumbs(item, index)" class="thumbs">
									<text class="num">{{ item.commentLikes }}</text>
									<u-icon class="icon" size="20" name="heart-fill" color="#e62e00"></u-icon>
								</view>
							</block>
							<block v-else>
								<view @click.stop="onThumbs(item, index)" class="thumbs">
									<text class="num">{{ item.commentLikes }}</text>
									<u-icon class="icon" size="20" name="heart-fill" color="#bfbfbf"></u-icon>
								</view>
							</block>
						</view>
						<text class="c-txt" @click="onclick(item,0)">{{ item.commentContent }}</text>
						<text class="time">{{ item.createTime  }}</text>
					</view>
				</view>
				<view v-for="i in commentChildrenList"
					v-show="i.commentableId!=null&&i.commentableId==item.sysUser.userId&&i.commentSearchId==item.commentId">
					<view class="sub-comment-item">
						<view class="user">
							<view class="u-avatar avatar"
								style="height: 20px; width: 20px; flex: 0 0 20px; background-color: transparent; border-radius: 500px;">
								<image class="u-avatar__img" style="border-radius: 500px;" :src="i.sysUser.avatar">
								</image>

							</view>
							<view class="u-head">
								<text>{{i.createBy}}</text>
								<view class="thumbs">
									<block v-if="i.topicCollection==1">
										<view @click.stop="cancelChildrenThumbs(i)" class="thumbs">
											<text class="num">{{ i.commentLikes }}</text>
											<u-icon class="icon" size="20" name="heart-fill" color="#e62e00"></u-icon>
										</view>
									</block>
									<block v-else>
										<view @click.stop="onChildrenThumbs(i)" class="thumbs">
											<text class="num">{{ i.commentLikes }}</text>
											<u-icon class="icon" size="20" name="heart-fill" color="#bfbfbf"></u-icon>
										</view>
									</block>
									<!-- 									<text class="num">{{i.commentLikes}}</text>
									<u-icon class="icon" size="20" name="heart-fill" color="#e62e00"></u-icon> -->

								</view>
							</view>

						</view>
						<view class="reply">
							<text>@</text>
							<navigator class="name">{{i.sysUser.nickName}}</navigator>
							<text @click="onclick(i,1)">：{{i.commentContent}}</text>
							<view class="time">
								{{i.createTime}}
							</view>
						</view>
					</view>
					<!-- {{i.commentContent}} -->
				</view>
			</view>

			<!-- 加载状态 -->
			<block v-if="commentList.length > 0">
				<view style="margin: 30rpx;">
					<u-loadmore :status="loadStatus2" />
				</view>
			</block>
			<block v-else>
				<u-empty text="暂无评论" mode="message"></u-empty>
			</block>
		</view>
		<view style="height: 100rpx;"></view>
		<!-- 评论输入框 -->
		<view class="comment-input">
			<input :placeholder="placeholder" @blur="onBlur" :focus="focus" fixed="true" cursor-spacing="10"
				v-model="form.commentContent" auto-height="true" placeholder-class="txt-placeholder" confirm-type="send"
				@confirm="addComment"></input>
			<uni-button @click="addComment" class="u-btn u-line-1 u-fix-ios-appearance u-size-default u-btn--success"
				app-parameter send-message-title send-message-path="sendMessagePath" lang="en" data-name session-from
				send-message-img
				style="border-radius: 100rpx; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); width: 100px; height: 60rpx; line-height: 60rpx; font-size: 30rpx; overflow: visible;">
				发送
			</uni-button>
		</view>
		<!-- 分享选择弹窗 -->
		<uni-popup ref="popups" type="share" backgroundColor="#ffffff" style="z-index: 1000;">
			<view class="post-share-container" @click="hands()">
				<view class="share-item2" @click="copyPageUrl">
					<image src="../../../static/images/homeSchoolCircle/share.png"></image>
					<text>分享链接</text>
				</view>
			</view>
		</uni-popup>



	</view>
	</view>
</template>

<script>
	import {
		getComment,
		addComment,
		likeCommentEdit
	} from "@/api/comment/comment.js"
	import {
		likeEdit
	} from "@/api/topic/topic.js"
	export default {
		data() {
			return {
				btnStyle: {
					color: "#fff",
					backgroundColor: '#55aaff'
				},
				focus: false,
				canSunbmit: false,
				commentList: [],
				commentChildrenList: [],
				placeholder: '留下你的精彩评论...',
				form: {
					commentSearchId: null,
					commentContent: '',
					commentableId: null,
					topicId: null,
					pageNum: 1, //第几页
					pageSize: 20, //显示多少条
				},
				total: null,
				loadStatus2: 'loadmore',
				loadStatus1: null,
				show: undefined,
				del: false
			};
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			if (this.$store.state.user.name == item.sysUser.userName) {
				this.del = true
			}
			this.postDetail = item
			this.show = this.postDetail.topicCollection == 0 ? false : true
			this.form.topicId = item.topicId
			this.getCommentList();

		},
		onReachBottom() {
			this.form.pageNum++;

			this.getCommentList();


		},
		computed: {
			imageLength() {
				return function(e) {
					if (e != null) {
						let imageList = e.split(",");
						let j = 0;
						for (let i = 0; i < imageList.length; i++) {
							j++;
						}
						return j
					} else {
						return 0;
					}

				}
			},
			imageList() {
				return function(e) {
					let imageList = e.split(',')
					return imageList
				}
			},
		},
		methods: {
			deletes() {
				// console.log(1);
			},
			onclick(item, index) {
				if (item.commentSearchId != null) {
					this.form.commentSearchId = item.commentSearchId
				} else {
					this.form.commentSearchId = item.commentId
				}
				this.form.commentableId = item.sysUser.userId
				this.placeholder = '回复:' + item.sysUser.nickName;
				this.focus = true

			},
			openPopuos() {
				this.$refs.popups.open();
			},
			hands() {
				this.$refs.popups.close();
			},
			messageRead(mid) {
				this.$H
					.post('message/readMessage', {
						postId: this.postId,
						mid: mid
					})
					.then(res => {

					});
			},
			copyPageUrl() {
				let that = this;
				uni.setClipboardData({
					data: this.route + '?topicId=' + this.postDetail.topicId,
					success: function() {
						uni.hideToast();
						uni.showToast({
							title: '复制成功快分享给好友叭~',
							icon: 'success',
							duration: 2000,
						})
					}
				});
			},
			// 点赞
			onThumbs(item, index) {
				likeCommentEdit(item.commentId, item.sysUser.userId, 1, 1).then(res => {
					if (res.code === 200) {
						this.commentList[index].topicCollection = 1;
						this.commentList[index].commentLikes++;
					}
				});
			},
			onChildrenThumbs(item) {
				likeCommentEdit(item.commentId, item.sysUser.userId, 1, 1).then(res => {
					if (res.code === 200) {
						for (let i = 0; i < this.commentList.length; i++) {
							if (item.commentId == this.commentList[i].commentId) {
								this.commentList[i].topicCollection = 1
								this.commentList[i].commentLikes++
							}
						}
					}
				});

			},
			// 取消点赞
			cancelThumbs(item, index) {
				likeCommentEdit(item.commentId, item.sysUser.userId, 0, 1).then(res => {
					if (res.code === 200) {
						this.commentList[index].topicCollection = 0;
						this.commentList[index].commentLikes--;
					}
				});
			},
			cancelChildrenThumbs(item) {
				likeCommentEdit(item.commentId, item.sysUser.userId, 0, 1).then(res => {
					if (res.code === 200) {
						for (let i = 0; i < this.commentList.length; i++) {
							if (item.commentId == this.commentList[i].commentId) {
								this.commentList[i].topicCollection = 0
								this.commentList[i].commentLikes--
							}
						}
					}
				});
			},
			// 输入框失去焦点时
			onBlur() {
				this.focus = false;
				if (this.form.commentSearchId == null && this.form.commentableId == null) {
					this.placeholder = '留下你的精彩评论...';
					return;
				}
				if (this.form.commentContent == '') {
					this.form.commentSearchId = null
					this.form.commentableId = null
					this.placeholder = '留下你的精彩评论...';
					return;
				}
			},
			// 获取评论列表
			getCommentList() {
				if (this.loadStatus1 === null) {
					this.loadStatus2 = 'loading';
					getComment(this.form).then((res) => {
						if (res.code == 200) {
							if (this.commentList == []) {
								this.commentList = res.rows
							} else {
								for (let i = 0; i < res.rows.length; i++) {
									let flag = 0;
									for (let j = 0; j < this.commentList.length; j++) {
										if (this.commentList[j].commentId == res.rows[i].commentId) {
											flag = 1
										}
									}
									if (flag == 0) {
										this.commentList.push(res.rows[i])
									}
								}
							}
							this.total = res.total
							if (this.form.pageNum * this.form.pageSize >= this.total) {
								setTimeout(() => {
									this.loadStatus2 = 'nomore';
									this.loadStatus1 = "loadmore"
								}, 300)

							} else {
								this.loadStatus2 = 'loadmore';
							}
						} else {
							setTimeout(() => {
								this.loadStatus2 = 'nomore';
							}, 300)
						}
						this.commentChildrenList = []
						for (let i = this.commentList.length; i > 0; i--) {
							this.commentChildrenList.push(this.commentList[i - 1])
						}
					})
				} else {
					setTimeout(() => {
						this.loadStatus2 = 'nomore';
					}, 300)
				}

			},
			jumpUser(userId) {
				// console.log(userId);
				// uni.navigateTo({
				// 	url: '/pages/user/home?uid=' + uid
				// });
			},
			addComment() {
				this.canSunbmit = true;
				if (this.form.commentContent == '') {
					this.$u.toast('评论不能为空');
					this.canSunbmit = false;
					return;
				}
				uni.showLoading({
					mask: true,
					title: '发布中'
				});
				addComment(this.form).then(res => {
					if (res.code == 200) {
						this.postDetail.topicCount++
						this.form.commentContent = '';
						this.form.commentSearchId = null
						this.form.commentableId = null
						this.focus = false
						this.placeholder = '留下你的精彩评论...';
						this.$u.toast('评论成功');
						this.commentList.unshift(res.data)
						this.commentChildrenList.push(res.data)
					}
					this.canSunbmit = false;
					uni.hideLoading();

				});
			},
			cancelCollection() {
				// let that = this
				likeEdit(this.postDetail.topicId, this.postDetail.sysUser.userId, 0, 0).then(res => {
					if (res.code === 200) {
						this.postDetail.topicCollection = 0;
						this.show = this.postDetail.topicCollection == 0 ? false : true
						this.postDetail.topicLikes--;
					}
				});
			},
			addCollection() {

				likeEdit(this.postDetail.topicId, this.postDetail.sysUser.userId, 1, 0).then(res => {
					if (res.code === 200) {
						this.postDetail.topicCollection = 1;
						this.show = this.postDetail.topicCollection == 0 ? false : true
						this.postDetail.topicLikes++;
					}


				});
			},

			// follow() {
			// this.$H
			// 	.post('user/addFollow', {
			// 		id: this.postDetail.uid
			// 	})
			// 	.then(res => {
			// 		if (res.code === 0) {
			// 			this.postDetail.isFollow = true;
			// 		} else {
			// 			this.$refs.uToast.show({
			// 				title: res.msg,
			// 				type: 'error'
			// 			});
			// 		}
			// 	});
			// },
			// cancelFollow() {
			// 	this.$H
			// 		.post('user/cancelFollow', {
			// 			id: this.postDetail.uid
			// 		})
			// 		.then(res => {
			// 			if (res.code === 0) {
			// 				this.postDetail.isFollow = false;
			// 			}
			// 		});
			// },
			previewImage(url, urls) {
				uni.previewImage({
					current: url, // 当前显示图片的http链接
					urls: urls // 需要预览的图片http链接列表
				});
			},

		}
	};
</script>

<style lang="scss" scoped>
	/deep/ .u-mode-center-box {
		background-color: transparent;
	}

	.post-title {
		margin: 20rpx 0;
	}

	.detail-container {
		padding: 20rpx;
		background-color: #ffffff;
	}

	.icon text {
		font-size: 12px;
		color: #999;
		margin-right: 20rpx;
	}

	/*关注*/

	.user-item {
		display: flex;

		.user-item-user {

			flex: 1;

			.userIntro {
				font-size: 12px;
				color: #999;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}

		image {
			width: 80rpx;
			height: 80rpx;
			float: left;
			margin-right: 10rpx;
			border-radius: 50%;
		}
	}

	.body {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;

		.menu-container {
			margin: 0 40rpx 0 40rpx;
			padding-top: 20rpx;
			display: flex;
			font-size: 24rpx;

			.p-item {
				display: flex;
				align-items: center;

				&:nth-child(2) {
					margin: 0 auto;
				}


			}
		}
	}


	/*评论列表*/
	.comment-box {
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 20rpx;
	}

	.comment-box>.title {
		margin-bottom: 20rpx;
	}

	.comment-item {
		display: flex;
		padding: 20rpx;

		&:active {
			background-color: #F5F5F5;
		}

		.c-content {
			display: flex;
			flex-direction: column;
			flex: 1;

			.time {
				color: #999;
				font-size: 10px;
			}

			.user {
				display: flex;

				.thumbs {
					margin-left: auto;
					display: flex;
					align-items: center;
					color: #bfbfbf;

					.num {
						margin-right: 10rpx;
					}
				}
			}
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}

	.sub-comment-item {
		margin-left: 100rpx;
		padding: 20rpx;

		&:active {
			background-color: #F5F5F5;
		}

		.user {
			display: flex;
			align-items: center;

			.name {
				color: #616161;
			}

			.avatar {
				margin-right: 10rpx;
			}

			.u-head {
				flex: 1;
				display: flex;

				.thumbs {
					margin-left: auto;
					display: flex;
					align-items: center;
					color: #bfbfbf;

					.num {
						margin-right: 10rpx;
					}
				}
			}
		}

		.reply {
			.time {
				margin-left: auto;
				font-size: 20rpx;
				color: #999;
			}

			.name {
				display: inline-block;
				color: #55aaff;
				font-weight: 600;
			}
		}
	}

	.comment-input {
		border-top: 1px solid f5f5f5;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		z-index: 999;
	}

	.comment-input input {
		display: inline-block;
		width: 600rpx;
		height: 100%;
		background-color: #f5f5f5;
		padding: 20rpx;

		border-radius: 10rpx;
		min-height: 40rpx;
	}

	.comment-input .u-btn {
		margin-left: 50rpx;
	}


	.img-style-1 {
		display: block;
		width: 100%;
		max-height: 600rpx;
		border-radius: 5px;
	}

	.img-style-2 {
		display: flex;
	}

	.img-style-2 image {
		margin: 5rpx;
		border-radius: 5px;
		width: 100%;
		height: 294rpx;
	}

	.img-style-3 {
		display: flex;
		flex-wrap: wrap;
	}

	.img-style-3 image {
		width: 31.3%;
		height: 200rpx;
		margin: 1%;
		border-radius: 5px;
	}

	.img-style-4 {
		display: flex;
		flex-wrap: wrap;
	}

	.img-style-4 image {
		width: 48%;
		height: 320rpx;
		margin: 0.5%;
	}


	// 分享弹窗
	.post-share-container {
		display: flex;
		padding: 30rpx;
		width: 60%;
		margin: 0 auto;

		.share-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&:nth-child(1) {
				margin-right: auto;
			}

			image {
				width: 100rpx;
				height: 100rpx;
			}

			text {
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}

		.share-item2 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&:nth-child(1) {
				margin: auto;
			}

			image {
				width: 100rpx;
				height: 100rpx;
			}

			text {
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}


	video {
		width: 100%;
	}

	.post-text {
		white-space: pre-wrap;
	}

	.sub-comment-item {
		margin-left: 50px;
		padding: 10px;
		background-color: #f3f2f2;

		.user {
			display: flex;
			align-items: center;

			.avatar {
				margin-right: 5px;
			}

			.u-head {
				flex: 1;
				display: flex;

				.thumbs {
					margin-left: auto;
					display: flex;
					align-items: center;
					color: #bfbfbf;

					.num {
						margin-right: 5px;
					}
				}
			}
		}

		.reply {
			.name {
				display: inline-block;
				color: #5af;
				font-weight: 600;

			}

			.time {
				margin-left: auto;
				font-size: 10px;
				color: #999;
			}
		}
	}

	.u-avatar__img {
		width: 100%;
		height: 100%;
	}

	.u-icon--right {
		flex-direction: row;
		align-items: center;
	}

	.comment-tool {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 10px;
		display: flex;
		z-index: 999;
	}

	.u-btn {
		margin: auto;
	}
</style>
